import React from 'react'
import { NavLink ,Outlet } from 'react-router-dom'
import './static/less/app.less'
export default function App() {

  // 定义首页导航数组
  const navArray = [
    {
      id: 1,
      text: "首页",
      path: "/index",
      icon: "i-index",
    },
    {
     id: 2,
     text: "书架",
     path: "/collect",
     icon: "i-collect",
   },
   {
     id: 3,
     text: "我的",
     path: "/home",
     icon: "i-home",
   }
 ]

  return (
    <div className='layout'>


      {/* 路由出口 */}
      <Outlet></Outlet>

      {/* 底部导航栏 */}
      <footer className='tabBar'>
        <div className='list'>
            {
               navArray.map( item => {
                   return (
                     <NavLink key={item.id} className="link" to={{pathname: item.path}}>
                         <i className={item.icon}></i>
                         <span>{item.text}</span>
                     </NavLink>
                   )
               })
            }
        </div>
      </footer>
    </div>
  )
}
